var React=require('React');
var SourceAction=require('../actions/SourceAction');
var ReactPropTypes = React.PropTypes;

var RssSourceEditor=React.createClass({

  propTypes: {
    value: ReactPropTypes.string
  },

  getInitialState: function() {
    return {
      value: ''
    };
  },

  render:function(){
    return (
      <div id={this.props.id} className="overlay">
      	<div className="popup">
      		<h2>New Rss Source</h2>
      		<div className="content">
      			<input type='text'  id="testflux" className="rsseditor" onChange={this._onChange} value={this.state.value}/>
            <br/>
            <ul className="nav-list">
                <li className="nav-item">
                    <a className="button-secondary pure-button" href="#" onClick={this._create}>Save</a>
                </li>
                <li className="nav-item">
                    <a className="button-secondary pure-button" href="#">Cancel</a>
                </li>
            </ul>
      		</div>
      	</div>
      </div>
    )
  },

  /**
   * @param {object} event
   */
  _onChange: function(/*object*/ event) {
    this.setState({
      value: event.target.value
    });
  },

  _create:function(event){
    SourceAction.create(this.state.value);
    this.setState({
      value: ''
    });
  }
});

module.exports=RssSourceEditor;
